import React, { Component } from "react";
import './Home.less';
import IconFont from '../../Icon/icon'
import { Card, Table } from 'antd';
import '../../iconfont.css'
import echarts from 'echarts';
let { Column } = Table;
let data = [
	{id: 1, title: '用户管理', icon: 'iconfont icon-51-diannao', bg: 'rgba(255, 156, 110, 0.3)', color: 'rgba(255, 156, 110, 0.8)'},
	{id: 2, title: '角色管理', icon: 'iconfont icon-shezhi', bg: 'rgba(105, 192, 255, 0.3)', color: 'rgba(105, 192, 255, 0.8)'},
	{id: 3, title: '菜单管理', icon: 'iconfont icon-caidanguanli', bg: 'rgba(179, 127, 235, 0.3)', color: 'rgba(179, 127, 235, 0.8)'},
	{id: 4, title: '订单管理', icon: 'iconfont icon-dingdan', bg: 'rgba(255, 214, 102, 0.3)', color: 'rgba(255, 214, 102, 0.8)'},
	{id: 5, title: '数据可视化', icon: 'iconfont icon-shujukeshihua', bg: 'rgba(255, 133, 192, 0.3)', color: 'rgba(255, 133, 192, 0.8)'},
	{id: 6, title: '关于我们', icon: 'iconfont icon-yonghu1', bg: 'rgba(92, 219, 211, 0.3)', color: 'rgba(92, 219, 211, 0.8)'},
]
let dataSource = [
	{ time: 'Tue Sep 07 2021 16:50:55 GMT+0800 (中国标准时间)', Name: '奇淼（piexlmax)', commit: 'Merge pull request #681 from flipped-aurora/gva-vue' },
	{ time: 'Tue Sep 07 2021 16:50:55 GMT+0800 (中国标准时间)', Name: '奇淼（piexlmax)', commit: 'Merge pull request #681 from flipped-aurora/gva-vue' },
	{ time: 'Tue Sep 07 2021 16:50:55 GMT+0800 (中国标准时间)', Name: '奇淼（piexlmax)', commit: 'Merge pull request #681 from flipped-aurora/gva-vue' },
	{ time: 'Tue Sep 07 2021 16:50:55 GMT+0800 (中国标准时间)', Name: '奇淼（piexlmax)', commit: 'Merge pull request #681 from flipped-aurora/gva-vue' },
	{ time: 'Tue Sep 07 2021 16:50:55 GMT+0800 (中国标准时间)', Name: '奇淼（piexlmax)', commit: 'Merge pull request #681 from flipped-aurora/gva-vue' },
]
class Home extends Component {
	constructor(props) {	
		super(props)
		this.state = {
			data: []
		}
	}
	componentDidMount() {
		let myChart = echarts.init(this.refs.bar) 
		myChart.setOption({
			xAxis: {
				type: 'category',
				axisLabel: {
					interval:0,//代表显示所有x轴标签显示
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLine: {
					show: false
				},
				data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号','8号', '9号', '10号', '11号', '12号', '13号', '14号','15号', '16号', '17号', '18号', '19号', '20号', '21号',]
			
			},
			yAxis: {
				type: 'value',
				splitLine: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
			},
			series: [{
				data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 200, 150, 80, 70, 110, 130, 120, 200, 250, 80 ],
				type: 'bar',
				showBackground: true,
				barMaxWidth: 30,
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				},
				itemStyle: {
					color: '#3099F2'
				}
			}]		
		})
	}
	createList() {
		return	data.map(item => 
			<li key={item.id}>
				<div className="icon" style={{ backgroundColor: item.bg }}><i style={{ color: item.color }} className={item.icon}></i></div>
				<span>{item.title}</span>
			</li>
		)
	}
    render() {
        return (
            <div className="home">
                <div className="header">
					<div className="left">
						<h1>早安，管理员，请开始一天的工作吧</h1>
						<p>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</p>
						<div className="dir">
							<span className="dir_1"><IconFont type="icon-pre_icon_huafeiliuliangchongzhi"></IconFont>今日流量 (1231231)</span>
							<span className="dir_1"><IconFont type="icon-yonghu"></IconFont>总用户数 (24001)</span>
							<span className="dir_1"><IconFont type="icon-haopingliang-copy"></IconFont>好评率 (99%)</span>
						</div>
					</div>
					<div>
						<img src="/static/img/dashbord.e74f8e90.png" alt="" />
					</div>
				</div>
				{/* 快捷入口 */}
				<Card>
					<p>快捷入口</p>
					<ul className="list">{this.createList()}</ul>
				</Card>
				<Card style={{ marginTop: 15 }}>
					<p style={{ color: '#3889ce', fontSize: 22 }}>记录数据</p>
					<div className="footer">
						<div ref="bar" style={{ width: 1000, height: 400 }}></div>
						<Table pagination={false} dataSource={dataSource} style={{ width: 600 }}>
							<Column ellipsis title="日期" dataIndex="time" key="firstName" />
							<Column ellipsis title="推送者" dataIndex="Name" key="lastName" />
							<Column ellipsis title="commit 信息" dataIndex="commit" key="age"/>
						</Table> 	
					</div>
				</Card>
			</div>
        )
    }
}

export default Home;
